<template>
  <div class="report-container">
    <div class="tab-row" :style="{ width: props.isIndex ? '1020px' : '1041px' }">
      <div
        v-for="item in tabList"
        :key="item.id"
        :class="tabActive === item.id ? 'tab-item tab-item-active' : 'tab-item'"
        @click="() => (tabActive = item.id)"
      >
        <SvgIcon class="svg-img" :name="item.icon" />{{ item.title }}
      </div>
    </div>
    <div class="input-row" :style="{ width: props.isIndex ? '1020px' : '1041px' }">
      <img class="input-img" v-if="props.isIndex" src="../../../assets/chat/input-img.gif" alt="" />
      <div
        class="input"
        v-if="tabActive === 1"
        :style="{ borderColor: props.isIndex ? 'rgba(70, 114, 255, 0.54)' : 'transparent' }"
      >
        <div class="input-content">
          <div>帮我写一份</div>
          <div class="report-input" :style="{ width: companyWidth + 'px' }">
            <el-input
              placeholder="企业名称"
              ref="companyRef"
              autosize
              type="textarea"
              v-model="company"
              @keydown.enter.native="inputBlurFn"
            ></el-input>
          </div>
          <div>的尽调报告</div>
        </div>
      </div>
      <div
        class="input"
        v-else-if="tabActive === 2"
        :style="{
          borderColor: props.isIndex ? 'rgba(70, 114, 255, 0.54)' : 'transparent',
          paddingRight: !props.isIndex ? '80px' : '30px'
        }"
      >
        <div class="input-content">
          <div>帮我评估房产价值，形成专业估值分析，</div>
          <div class="report-input guzhi-input" :style="{ width: addressWidth + 'px' }">
            <el-input
              placeholder="详细地址，面积，楼层，朝向，装修情况等（越详细评估效果越好）"
              ref="addressRef"
              v-model="address"
              type="textarea"
              autosize
              @keydown.enter.native="inputBlurFn"
            ></el-input>
          </div>
          <!-- <div class="report-input" :style="{ width: areaWidth + 'px' }">
            <el-input placeholder="面积" ref="areaRef" v-model="area" @keydown.enter.native="inputBlurFn"></el-input>
          </div> -->
        </div>
      </div>
      <div
        class="input"
        v-else-if="tabActive === 3"
        :style="{
          borderColor: props.isIndex ? 'rgba(70, 114, 255, 0.54)' : 'transparent',
          paddingRight: !props.isIndex ? '80px' : '30px'
        }"
      >
        <el-input
          ref="kefuRef"
          class="question-input"
          type="textarea"
          v-model="kefuValue"
          placeholder="对再查查系统有疑问？可以在此输入你的问题，我将为你解答"
          @keydown.enter.native="inputBlurFn($event)"
        />
      </div>
      <div
        class="input"
        v-else-if="tabActive === 4"
        :style="{
          borderColor: props.isIndex ? 'rgba(70, 114, 255, 0.54)' : 'transparent',
          paddingRight: !props.isIndex ? '80px' : '30px'
        }"
      >
        <el-input
          ref="zhuanjiaRef"
          class="question-input"
          type="textarea"
          v-model="zhuanjiaValue"
          placeholder="我是你的不良处置专家，请在此输入你的问题，我将为你解答"
          @keydown.enter.native="inputBlurFn($event)"
        />
      </div>
      <div class="icon-container" style="cursor: pointer">
        <span v-if="props.isIndex === false && props.isLoading && !props.loadingStatus" class="stop-img"
          ><img class="img" @click="stopFn" src="../../../assets/chat/stop.png" alt=""
        /></span>
        <img
          v-if="props.isIndex === false && isLoading"
          class="loading-icon"
          src="../../../assets/chat/loading.gif"
          alt=""
        />
        <img
          v-else-if="
            !isLoading &&
            (tabActive === 1
              ? company
              : tabActive === 2
                ? address
                : tabActive === 3
                  ? kefuValue
                  : tabActive === 4
                    ? zhuanjiaValue
                    : '')
          "
          @click="inputBlurFn"
          src="../../../assets/chat/send.svg"
          class="send-icon"
          alt=""
        />
        <img v-else @click="inputBlurFn" src="../../../assets/chat/unsend.svg" class="send-icon" alt="" />
      </div>
      <div
        class="top-example-button"
        v-if="!props.isIndex && (tabActive === 2 || tabActive === 3 || tabActive === 4)"
        @click="toggleTopExample"
      >
        <el-icon v-if="!showExample" style="vertical-align: middle; color: #3375f5; font-size: 12px; margin-right: 3px">
          <ArrowUp />
        </el-icon>
        <el-icon v-else style="vertical-align: middle; color: #3375f5; font-size: 12px; margin-right: 3px">
          <ArrowDown />
        </el-icon>
        <span>示例</span>
      </div>
      <div
        class="top-example-list-container"
        :style="{ top: tabActive === 3 ? '-128px' : '-210px' }"
        v-if="!props.isIndex && (tabActive === 2 || tabActive === 3 || tabActive === 4) && showExample"
      >
        <div class="example-title">试试以下示例：</div>
        <div v-if="props.platform !== 'map'">
          <div v-if="tabActive === 2">
            <div class="guzhi-container">
              <div class="example-item" v-for="(item, index) in tabList[1].list" :key="index" @click="guzhiFn(item)">
                <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
                {{ item }}
              </div>
            </div>
          </div>
          <div v-if="tabActive === 3">
            <div class="service-container">
              <div class="example-item" v-for="(item, index) in tabList[2].list" :key="index" @click="kefuFn(item)">
                <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
                {{ item }}
              </div>
            </div>
          </div>
          <div v-if="tabActive === 4">
            <div class="guzhi-container">
              <div class="example-item" v-for="(item, index) in tabList[3].list" :key="index" @click="zhuanjiaFn(item)">
                <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
                {{ item }}
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div v-if="tabActive === 2">
            <div class="guzhi-container">
              <div class="example-item" v-for="(item, index) in tabList[0].list" :key="index" @click="guzhiFn(item)">
                <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="props.isIndex">
      <div
        class="example-row"
        :style="{ width: props.isIndex ? '1020px' : '1041px' }"
        v-if="tabActive === 2 || tabActive === 3 || tabActive === 4"
      >
        <div class="example-title">试试以下示例：</div>
        <div v-if="props.platform !== 'map'">
          <div class="example-list-container guzhi-container" v-if="tabActive === 2">
            <div class="example-item" v-for="(item, index) in tabList[1].list" :key="index" @click="guzhiFn(item)">
              <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
              {{ item }}
            </div>
          </div>
          <div class="example-list-container service-container" v-if="tabActive === 3">
            <div class="example-item" v-for="(item, index) in tabList[2].list" :key="index" @click="kefuFn(item)">
              <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
              {{ item }}
            </div>
          </div>
          <div class="example-list-container guzhi-container" v-if="tabActive === 4">
            <div class="example-item" v-for="(item, index) in tabList[3].list" :key="index" @click="zhuanjiaFn(item)">
              <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
              {{ item }}
            </div>
          </div>
        </div>
        <div v-else>
          <div class="example-list-container guzhi-container" v-if="tabActive === 2">
            <div class="example-item" v-for="(item, index) in tabList[0].list" :key="index" @click="guzhiFn(item)">
              <img src="../../../assets/chat/huati.png" alt="" class="huati-img" />
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus"
import { ref, watch, nextTick, computed } from "vue"
import { tabs } from "../../report/components/tabList"
import emitter from "../../../utils/eventBus"
type PropType = {
  isIndex: boolean
  isLoading: boolean
  loadingStatus?: boolean
  platform?: string
}
const props = withDefaults(defineProps<PropType>(), {
  isIndex: false,
  isLoading: false,
  loadingStatus: false
})
const emits = defineEmits([
  "stopFn",
  "generateReport",
  "setTabActive",
  "changeShowList",
  "setCompany",
  "setAddress",
  "setKefu",
  "setZhuanjia",
  "changeIsRolling"
])

const tabActive = ref(1)
const inputValue = ref("")
const setTabActive = (id: number) => {
  tabActive.value = id
}

const tabList = computed(() => {
  if (props.platform === "map") {
    tabActive.value = 2
    return [tabs.value[1]]
  } else {
    return tabs.value
  }
})
//尽调报告
const company = ref("")
const companyWidth = ref(100)

const inputBlurFn = (event: any) => {
  if (!event.ctrlKey) {
    // 如果没有按下组合键ctrl，则会阻止默认事件
    event.preventDefault()
  }
  emits("changeIsRolling")
  if (props.isIndex) {
    emitter.emit("custom-event", { data: true })
    //首页若有参数，则带过去赋值给列表页，并发送请求
    //若没有参数跳转至列表页
    emits("changeShowList", false)
    emits("setTabActive", tabActive.value)
    if (tabActive.value === 1) {
      if (company.value) {
        inputValue.value = "帮我写一份" + company.value + "的尽调报告"
        emits("generateReport", inputValue.value)
        emits("setCompany", company.value)
      }
    } else if (tabActive.value === 2) {
      if (address.value) {
        const addressStr = address.value ? `${address.value}` : ""

        inputValue.value = "帮我评估房产价值，形成专业估值分析 : " + addressStr
        emits("generateReport", inputValue.value)
        emits("setAddress", address.value)
      }
    } else if (tabActive.value === 3) {
      if (kefuValue.value) {
        inputValue.value = kefuValue.value
        emits("generateReport", inputValue.value)
        emits("setKefu", kefuValue.value)
      }
    } else if (tabActive.value === 4) {
      if (zhuanjiaValue.value) {
        inputValue.value = zhuanjiaValue.value
        emits("generateReport", inputValue.value)
        emits("setZhuanjia", zhuanjiaValue.value)
      }
    }
  } else {
    //判断是否正在生成
    if (props.isLoading) return ElMessage.error("正在生成内容,请勿切换。")
    //列表页校验必填
    if (tabActive.value === 1) {
      if (company.value) {
        inputValue.value = "帮我写一份" + company.value + "的尽调报告"
        emits("generateReport", inputValue.value)
        emits("setCompany", company.value)
      } else {
        ElMessage.error("请输入企业名称")
      }
    } else if (tabActive.value === 2) {
      if (address.value) {
        const addressStr = address.value ? `${address.value}` : ""
        inputValue.value = "帮我评估房产价值，形成专业估值分析 : " + addressStr
        emits("generateReport", inputValue.value)
      } else {
        ElMessage.error("请输入详细地址，面积，楼层，朝向，装修情况")
      }
    } else if (tabActive.value === 3) {
      if (kefuValue.value) {
        inputValue.value = kefuValue.value
        emits("generateReport", inputValue.value)
      } else {
        ElMessage.error("请输入您的问题")
      }
    } else if (tabActive.value === 4) {
      if (zhuanjiaValue.value) {
        inputValue.value = zhuanjiaValue.value
        emits("generateReport", inputValue.value)
      } else {
        ElMessage.error("请输入您的问题")
      }
    }
  }
}

watch(
  () => company.value,
  (val: any) => {
    const inputLength = val.length
    companyWidth.value = inputLength * 14 + 30
  }
)
//估值
const address = ref("")
const addressWidth = ref(100)

watch(
  () => address.value,
  (val: any) => {
    const inputLength = val.length
    addressWidth.value = inputLength * 14 + 30
  }
)

//客服
const kefuValue = ref("")
const kefuFn = (item: string) => {
  emits("changeIsRolling")
  if (!props.isIndex) {
    toggleTopExample()
  }
  emitter.emit("custom-event", { data: true })
  emits("generateReport", item)
  emits("setTabActive", tabActive.value)
  emits("setKefu", item)
}
const guzhiFn = (item: string) => {
  emits("changeIsRolling")
  if (!props.isIndex) {
    toggleTopExample()
  }
  emitter.emit("custom-event", { data: true })
  emits("generateReport", "帮我评估房产价值，形成专业估值分析 : " + item)
  emits("setTabActive", tabActive.value)
  emits("setAddress", item)
}
//不良处置专家
const zhuanjiaValue = ref("")
const zhuanjiaFn = (item: string) => {
  emits("changeIsRolling")
  if (!props.isIndex) {
    toggleTopExample()
  }
  emitter.emit("custom-event", { data: true })
  emits("generateReport", item)
  emits("setTabActive", tabActive.value)
  emits("setZhuanjia", item)
}
const showExample = ref(false)
const toggleTopExample = () => {
  showExample.value = !showExample.value
}
const stopFn = () => {
  emits("stopFn")
}
const resetInput = () => {
  company.value = ""
  address.value = ""
  kefuValue.value = ""
  zhuanjiaValue.value = ""
}
const companyRef = ref()
const addressRef = ref()

const kefuRef = ref()
const zhuanjiaRef = ref()
watch(
  () => tabActive.value,
  () => {
    if (props.platform !== "map") {
      if (tabActive.value === 1) {
        nextTick(() => {
          companyRef.value && companyRef.value.focus()
        })
      } else if (tabActive.value === 2) {
        nextTick(() => {
          if (!address.value) {
            addressRef.value && addressRef.value.focus()
          }
        })
      } else if (tabActive.value === 3) {
        nextTick(() => {
          kefuRef.value && kefuRef.value.focus()
        })
      } else if (tabActive.value === 4) {
        nextTick(() => {
          zhuanjiaRef.value && zhuanjiaRef.value.focus()
        })
      }
    } else {
      nextTick(() => {
        if (!address.value) {
          addressRef.value && addressRef.value.focus()
        }
      })
    }
  },
  { deep: true, immediate: true }
)
const setCompanyFn = (companyStr: string) => {
  console.log("子组件", companyStr)

  company.value = companyStr
}
const setAddressFn = (addressStr: string) => {
  address.value = addressStr
}
const setKefuFn = (kefuStr: string) => {
  kefuValue.value = kefuStr
}
const setZhuanjiaFn = (zhuanjiaStr: string) => {
  zhuanjiaValue.value = zhuanjiaStr
}
defineExpose({
  companyRef,
  addressRef,
  kefuRef,
  zhuanjiaRef,
  tabActive,
  setTabActive,
  company,
  address,
  kefuValue,
  zhuanjiaValue,
  resetInput,
  guzhiFn,
  setCompanyFn,
  setAddressFn,
  setKefuFn,
  setZhuanjiaFn
})
</script>
<style scoped lang="scss">
.report-container {
  position: relative;
  .tab-row {
    display: flex;
    width: 1020px;
    margin: 0 auto;
    .tab-item {
      color: #333;
      text-align: center;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 14px;
      border-radius: 23px;
      padding: 9px 14px;
      border: 1px solid #fff;
      background-color: #fff;
      margin-right: 10px;
      display: flex;
      justify-content: center;
      cursor: pointer;
      .svg-img {
        color: #4672ff;
        margin-right: 5px;
      }
    }
    .tab-item:nth-child(2) {
      .svg-img {
        color: #ff9646;
        margin-right: 5px;
      }
    }
    .tab-item:nth-child(3) {
      .svg-img {
        color: #00ad65;
        margin-right: 5px;
      }
    }
    .tab-item:nth-child(4) {
      .svg-img {
        color: #f04040;
        margin-right: 5px;
      }
    }
    .tab-item-active {
      background-color: #4672ff;
      color: #fff;
      border-color: #4672ff;
      .svg-img {
        color: #fff !important;
        margin-right: 5px;
      }
    }
  }

  .input-row {
    width: 1020px;
    margin: 10px auto 15px;
    position: relative;
    .input-img {
      position: absolute;
      top: -80px;
      right: 30px;
      width: 80px;
      height: 80px;
    }
    .input {
      height: 140px;
      padding: 18px 30px 18px 20px;
      box-sizing: border-box;
      border-radius: 14px;
      border: 1px solid rgba(70, 114, 255, 0.54);
      // box-shadow: 14px 27px 45px 0px rgba(112, 144, 176, 0.2);
      background-color: #fff;
      .input-content {
        display: flex;
        align-items: flex-start;
        white-space: nowrap;
        font-size: 14px;
        font-style: normal;
        line-height: 14px;
        .report-input {
          min-width: 100px;
          text-align: center;
          :deep(.el-textarea__inner) {
            box-shadow: none;
            resize: none;
            color: #4672ff;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            padding-top: 0;
            max-height: 104px;
          }

          :deep(.el-textarea__inner::placeholder) {
            color: #a8bdff;
            text-align: left;
          }
        }
        .guzhi-input {
          min-width: 500px;
        }
      }
      .question-input {
        :deep(.el-textarea__inner) {
          box-shadow: none;
          padding: 0;
          border-radius: 0;
          height: 104px;
          resize: none;
          color: #333;
        }
        :deep(.el-textarea__inner::placeholder) {
          color: #666;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 14px;
          padding-top: 3px;
        }
      }
    }

    .icon-container {
      position: absolute;
      right: 20px;
      bottom: 15px;
      z-index: 999;
      display: flex;
      align-items: center;
      .stop-img {
        width: 32px;
        height: 32px;
        position: relative;
        margin-right: 30px;
        .img {
          width: 32px;
          height: 32px;
        }
        &::before {
          content: "";
          width: 1px;
          height: 25px;
          position: absolute;
          top: 5px;
          left: 47px;
          background: #ddd;
        }
      }
      .loading-icon {
        width: 37px;
        height: 37px;
      }
      .send-icon {
        width: 32px;
        height: 32px;
      }
    }
    .top-example-button {
      position: absolute;
      padding: 5px;
      top: 18px;
      right: 20px;
      border-radius: 4px;
      border: 1px solid #4672ff;
      color: #4672ff;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 14px;
      display: flex;
      cursor: pointer;
    }
    .top-example-list-container::-webkit-scrollbar {
      width: 0; /* 对于垂直滚动条 */
    }
    .top-example-list-container {
      position: absolute;
      top: -210px;
      left: 0;
      width: 1041px;
      max-height: 204px;
      background-color: #fff;
      border-radius: 20px;
      padding: 15px 30px;
      overflow-y: scroll;
      box-shadow:
        0px -4px 7.5px 0px rgba(51, 117, 245, 0.15),
        0px 4px 7.5px 0px rgba(51, 117, 245, 0.15);
      .service-container {
        display: flex;
        .example-item {
          margin: 10px 15px 0 0;
          padding: 13px 15px;
          border-radius: 10px;
          border: 1px solid transparent;
          background: #fff;
          cursor: pointer;
          border: 1px solid #e6e6e6;
          // box-shadow: 0px 2px 9.7px 0px rgba(70, 114, 255, 0.2);
          &:hover {
            border: 1px solid rgba(70, 114, 255, 0.54);
            box-shadow: 0px 2px 9.7px 0px rgba(70, 114, 255, 0.2);
          }
          .huati-img {
            width: 14px;
            height: 14px;
          }
        }
      }
    }
  }
  .example-title {
    color: #333;
    margin-bottom: 10px;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
  }
  .guzhi-container {
    .example-item {
      color: #333;
      font-family: "PingFang SC";
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 19px;
      margin-top: 20px;
      cursor: pointer;
      .huati-img {
        width: 14px;
        height: 14px;
      }
      &:hover {
        color: #4672ff;
      }
    }
  }
  .service-container {
    display: flex;
    .example-item {
      margin: 10px 15px 0 0;
      padding: 13px 15px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: #fff;
      cursor: pointer;
      // box-shadow: 0px 2px 9.7px 0px rgba(70, 114, 255, 0.2);
      &:hover {
        border-color: rgba(70, 114, 255, 0.54);
        box-shadow: 0px 2px 9.7px 0px rgba(70, 114, 255, 0.2);
      }
      .huati-img {
        width: 14px;
        height: 14px;
      }
    }
  }
  .example-row {
    position: absolute;
    left: 80px;
    top: 200px;
    width: 1020px;
  }
}
</style>
